<template>
  <div style="padding-bottom: 10px">
    <div class="contact">
      <span>联系人（{{custLinkDtos.length}}）</span>
      <el-button type="text" @click="show_editContacts()" v-if="type === 'my'">+添加</el-button>
    </div>
    <div v-for="(item,index) in custLinkDtos" :key="index" class="card">
      <div class="title">
        <span style="color:#2A97F9" class="textHid">{{item.linker}}</span>
        <el-tooltip class="item" effect="dark" content="编辑" placement="top" v-if="type === 'my'">
                            <span>
                              <span class="editContacts el-icon-edit-outline" style="color:#2A97F9" @click="show_editContacts(item, index)"></span>
                            </span>
        </el-tooltip>
      </div>
      <div>
        <ul>
          <li class="textHid">
            <span>职位：</span><span>{{item.postType}}</span>
          </li>
          <li class="textHid">
            <span>邮箱：</span><span class="send_mail" @click="sendMail(item.email)" :title="item.email">{{item.email}}</span>
          </li>
          <li class="textHid">
            <span>电话：</span><span>{{item.telFax}}</span>
          </li>
          <li class="textHid">
            <span>备注：</span><span>{{item.remarks}}</span>
          </li>
        </ul>
      </div>
    </div>

    <editContacts ref="editContact" @update="updataContacts" :title="contactsTitle" :nowkey="contactsIndex" :data="contactsData"></editContacts>

  </div>
</template>

<script>
    import {editCust} from '@/api/customer'
    import editContacts from '@/components/customer/contact/edit'

    export default {
        name: "contact",
        props:{
            custLinkDtos:{
                type:Array,
                default() {
                    return []
                }
            },
            custForm:{
                type:Object,
                default() {
                    return {}
                }
            },
            type:{
                type:String,
                default() {
                    return 'my'
                }
            }
        },
        data() {
            return {
                contactsIndex:'',
                contactsData:'',
                contactsTitle:'',
                beforForm:{
                    custLinkDtos:[]
                }
            }
        },
        components:{
            editContacts
        },
        methods:{
            show_editContacts(item, index) {
                this.$refs.editContact.dialogForm = true
                this.$nextTick(() => {
                    if (item) {
                        this.contactsTitle = '编辑联系人'
                        this.contactsIndex = index
                        this.contactsData = item
                    } else {
                        this.contactsTitle = '新增联系人'
                        this.contactsData = {
                            'linker': '',
                            'email': '',
                            'postType': '',
                            'telFax': ''
                        }
                        this.contactsIndex = ''
                    }
                })
            },
            updataContacts(data, index) { // 编辑公司客户联系人
                if (data) {
                    this.beforForm = JSON.parse(JSON.stringify(this.custForm))
                    if(index !== '') {
                        this.beforForm.custLinkDtos[index] = data
                    } else {
                        this.beforForm.custLinkDtos.push(data)
                    }
                    editCust(this.beforForm).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            this.$emit('refresh')
                        }
                        this.$refs.editContact.loading = false
                        this.$refs.editContact.dialogForm = false
                    }).catch(() => {
                        this.$refs.editContact.loading = false
                    })
                }
            },
        }
    }
</script>

<style scoped lang="scss">
  .contact{
    display: flex;
    justify-content: space-between;
    margin-left: 20px;
    margin-right: 10px;
    margin-bottom: 10px;
    align-items: center;
    span{
      font-weight: 600;
    }
  }
  .card {
    background-color: #E9F3FD;
    border-radius: 8px;
    padding: 13px;
    margin: 10px 10px 10px 20px;
  }
  .title {
    display: flex;
    justify-content: space-between;
  }
  .editContacts{
    font-size: 20px;
    cursor: pointer;
  }
</style>
